<template>
  <div class="model-info" v-if="modelType">
    <t-alert :theme="alertTheme" class="model-info-alert">
      <template #title>
        <span>{{ title }}</span>
      </template>
      <div>
        <p>{{ description }}</p>
        <p class="voice-compatibility" v-if="showVoiceInfo">
          <b>支持的音色:</b> {{ supportedVoices }}
        </p>
      </div>
    </t-alert>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { getAvailableVoices } from '@renderer/api/ttsApi';

const props = defineProps({
  modelType: {
    type: String,
    default: ''
  }
});

// 存储当前模型支持的音色
const supportedVoicesList = ref([]);

// 判断模型类型的计算属性
const isTtsModel = computed(() => {
  return props.modelType === 'tts-1' || props.modelType === 'tts-1-hd';
});

const isGpt4oModel = computed(() => {
  return props.modelType === 'gpt-4o-audio-preview' || props.modelType === 'gpt-4o-mini-audio-preview';
});

const isCustomVoiceModel = computed(() => {
  return props.modelType === 'gpt-4o-mini-tts';
});

// 提示信息标题
const title = computed(() => {
  if (isTtsModel.value) {
    return '标准TTS模型';
  } else if (isGpt4oModel.value) {
    return '多语言模型';
  } else if (isCustomVoiceModel.value) {
    return '自定义语音指令模型';
  }
  return '模型信息';
});

// 提示信息描述
const description = computed(() => {
  if (isTtsModel.value) {
    return '此模型需要您提供目标语言的文本。不会自动翻译内容，仅朗读您提供的文本。';
  } else if (isGpt4oModel.value) {
    return '此模型支持自动翻译。您可以使用原始文本，并选择目标语言，系统将自动翻译并生成语音。';
  } else if (isCustomVoiceModel.value) {
    return '此模型需要您提供目标语言的文本，并支持自定义语音指令来控制语音特性（如语调、情感、语速等）。';
  }
  return '请选择合适的模型进行语音合成。';
});

// 提示框主题颜色
const alertTheme = computed(() => {
  if (isTtsModel.value) {
    return 'info';
  } else if (isGpt4oModel.value) {
    return 'warning';
  } else if (isCustomVoiceModel.value) {
    return 'success';
  }
  return 'info';
});

// 是否显示音色兼容性信息
const showVoiceInfo = computed(() => !!props.modelType && supportedVoicesList.value.length > 0);

// 获取当前模型支持的音色名称列表
const supportedVoices = computed(() => {
  return supportedVoicesList.value.map(voice => voice.name).join('、');
});

// 加载当前模型支持的音色
const loadModelVoices = async () => {
  if (!props.modelType) return;

  try {
    const voices = await getAvailableVoices(props.modelType);
    supportedVoicesList.value = voices;
  } catch (error) {
    console.error('加载模型支持的音色失败:', error);
    supportedVoicesList.value = [];
  }
};

// 监听模型变化
watch(() => props.modelType, async (newModelType) => {
  if (newModelType) {
    await loadModelVoices();
  } else {
    supportedVoicesList.value = [];
  }
});

// 初始加载
onMounted(async () => {
  if (props.modelType) {
    await loadModelVoices();
  }
});
</script>

<style lang="less" scoped>
.model-info {
  margin: 16px;

  .model-info-alert {
    border-radius: 4px;

    :deep(.t-alert__icon) {
      margin-right: 8px;
    }

    :deep(.t-alert__title) {
      font-weight: 500;
      margin-bottom: 4px;
    }

    :deep(.t-alert__description) {
      p {
        margin: 4px 0;
        line-height: 1.5;
      }

      .voice-compatibility {
        margin-top: 8px;
        font-size: 13px;
      }
    }
  }
}
</style>
